<script setup lang="ts">
import Top from "../components/Top.vue";
import DomesticNews from "../components/DomesticNews.vue";
import PlayNews from "../components/PlayNews.vue";
import SportNews from "../components/SportNews.vue";
import Foot from "../components/Foot.vue";
</script>
<template>
  <div class="app-container">
    <Top />
    <div class="content">
      <div class="news-column">
        <div class="news-type domestic">国内新闻</div>
        <DomesticNews />
      </div>
      <div class="news-column">
        <div class="news-type entertainment">娱乐新闻</div>
        <PlayNews></PlayNews>
      </div>
      <div class="news-column">
        <div class="news-type sports">体育新闻</div>
        <SportNews />
      </div>
    </div>
    <Foot />
  </div>
</template>
<style scoped>
.app-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1rem;
}
.content {
  display: flex;
  justify-content: space-between;
  margin-top: 2rem;
}
.news-column {
  flex: 1;
  margin: 0 1rem;
}
.news-type {
  width: 100px;
  height: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  font-size: 1.2rem;
  font-weight: bold;
  margin-bottom: 1rem;
}
.domestic {
  background: #2c3e50;
}
.entertainment {
  background: #e74c3c;
}
.sports {
  background: #27ae60;
}
</style>
